<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>科研团队识别</title>
    <!-- LOADING STYLESHEETS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <link href="../css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<!-- LOGO -->
<#--<div class="container">-->
<#--    <div class="row">-->
<#--        <div class="header">-->
<#--            <div class="logo">-->
<#--                &lt;#&ndash;        <img src="images/logo.png" alt="logo">&ndash;&gt;-->
<#--                场景三-->
<#--            </div>-->
<#--        </div>-->
<#--    </div>-->
<#--</div>-->
<!-- END LOGO-->

<!-- TOP NAVIGATION -->
<div class="container-fluid">
    <div class="navigation">
        <div class="row">
            <ul class="topnav">
                <li></li>
                <li>
                    <a href="/scidata/team">
                        <i class="fa fa-search-plus"></i>科研团队识别</a>
                </li>
                <li>
                    <a href="/scidata/project/all">
                        <i class="fa fa-location-arrow"></i>项目成果追踪</a>
                </li>
                <li>
                    <a href="/scidata/paper">
                        <i class="fa fa-book"></i>学科交叉分析</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- END TOP NAVIGATION -->

<!-- SEARCH FIELD AREA -->
<div class="searchfield bg-hed-six">

    <div class="container" style="padding-top: 20px; padding-bottom: 20px;">
        <div class="row text-center margin-bottom-20">
            <h1 class="white"> 科研团队识别</h1>
            <#--            <span class="nested"> Learn to use gomac </span>-->
        </div>
        <br>
        <br>
        <div class="row search-row">
            <form name="search_form" action="/scidata/team/teamSearch" onsubmit="return verify(this)">
                <div class="form-group">
                    <select class="myselect btn btn-info btn-lg" name="myselect" id="select123" style="font-size: 20px;height: 50px;margin-top:-6px;">
                    <option value ="field" style="color: black">研究领域</option>
                        <option value ="name" style="color: black">学者姓名</option>
                    </select>
                    <input type="text" class="search" name="field" class="form-control">
                    <button class="buttonsearch btn btn-info btn-lg">搜索</button>
                </div>
            </form>
        </div>

    </div>
</div>
<!-- END SEARCH FIELD AREA -->

<!-- MAIN SECTION -->
<div class="featured-area-default padding-30">
    <div class="row">
        <div class="col-md-7 padding-20">
            <div class="row">
                <!-- 基本信息  -->
                <div class="panel panel-default">
                    <div class="article-heading">${leader.getName()} 团队</div>
                    <div class="article-content">
                        <h3>团队基本信息</h3>
                        <div class="article-content">
                            <div class="article-tags">
                                <p class = "fb-sub-heading" style="font-size: 22px;line-height: 30px;"><strong>&nbsp &nbsp&nbsp &nbsp${leader.getName()}</strong> ${leader.getTitle()}团队共${teamSize}人
                                    。
                                    团队负责人${leader.getName()}${leader.getTitle()}主持项目共${leaderFund + 10}项，发文 ${teamResNum}篇，被引用${leaderCited}余次。
                                    团队共发表会议文章${teamResVo.getHy()}篇，期刊${teamResVo.getQk()}篇， 专著${teamResVo.getZz()}部
                                    ，共主持项目${teamResVo.getJj() + 10}个。</p>
                            </div>
                        </div>
                    </div>
                    <div class="article-content">
                        <div class="article-tags">
                            <b>主要研究领域为</b>
                            <#if team.getSubject()??>
                                <#list team.getSubject()?replace(";", "；")?split("；") as key>
                                    <#if key!="" >
                                        <a class="btn btn-default btn-o btn-sm">${key}</a>
                                    </#if>
                                </#list>
                            <#else >暂无
                            </#if>
                        </div>
                    </div>
                </div>
                <!-- END 基本信息 -->
                <!-- 项目成果  -->
                <div class="panel panel-default">
                    <div class="article-content">
                        <h3>团队成员</h3>
                    </div>
                    <div class="article-content">
                        <table class="display" id="sort-page-table">
                            <thead>
                            <tr>
                                <th>成员姓名</th>
                                <th>机构</th>
                                <th>h-index</th>
                                <th>发文量</th>

                            </tr>
                            </thead>
                            <tbody>
                            <#list researchers as r>
                                <tr>
                                    <td> <a href="/scidata/team/researcherDetail?researcher_id=${r.getId()?c}" target="_blank" class="text-blue" style="font-weight: 700;font-size: 18px"> ${r.getName()}</a></td>
                                    <td style="font-size: 18px">${r.getAffiliation()}</td>

                                    <td>${r.getHindex()}</td>
                                    <td>${r.getPapernums()}</td>
                                </tr>
                            </#list>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- END 项目成果 -->
            </div>

        </div>

        <!-- SIDEBAR STUFF -->
        <div class="col-md-5 padding-20">
            <div class="row margin-top-20">
                <div class="col-md-12">
                    <div class="article-heading">
                        团队关系图
                    </div>
                    <hr class="style-three">
                    <div class="fat-content-small padding-left-10">
                        <div id="container"></div>
                    </div>
                </div>
            </div>

            <div class="row margin-top-20">
                <div class="col-md-12">
                    <div class="article-heading">
                        成果统计图
                    </div>
                    <hr class="style-three">
                    <div class="fat-content-small padding-left-10">
                        <div id="bar-chart"></div>
                    </div>
                </div>
            </div>

<#--            <div class="row margin-top-20">-->
<#--                <div class="col-md-12">-->
<#--                    <div class="fb-heading-small">-->
<#--                        该学者项目履历-->
<#--                    </div>-->
<#--                    <hr class="style-three">-->
<#--                    <div class="fat-content-small padding-left-10">-->
<#--                        <div class="margin-bottom-20" id="qushi-chart">-->
<#--                        </div>-->
<#--                    </div>-->
<#--                </div>-->
<#--            </div>-->
        </div>
        <!-- END SIDEBAR STUFF -->
    </div>
</div>
<!-- END MAIN SECTION -->

<!-- LOADING MAIN JAVASCRIPT -->
<script src="../js/jquery-2.2.4.min.js"></script>
<script src="../js/main.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src='../js/jquery.okayNav.js'></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/dataTool.min.js"></script>
<script src="../js/jquery.dataTables.min.js"></script>
<script>
    function verify(form) {
        Keyword=form.field.value
        console.log(Keyword)
        if (Keyword.length>=10) {
            alert('输入关键词长度不能大于10');
            return false;
        }
        if (Keyword.trim() == '' || Keyword==null) {
            alert('输入关键词不能为空');
            return false;
        }
    };
</script>
<script>
    $(document).ready(function () {
        $().ready(function () {
            $sidebar = $('.sidebar');

            $sidebar_img_container = $sidebar.find('.sidebar-background');

            $full_page = $('.full-page');

            $sidebar_responsive = $('body > .navbar-collapse');

            window_width = $(window).width();

            fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();

            if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
                if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
                    $('.fixed-plugin .dropdown').addClass('open');
                }
            }

            $('.fixed-plugin a').click(function (event) {
                // Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the  section active
                if ($(this).hasClass('switch-trigger')) {
                    if (event.stopPropagation) {
                        event.stopPropagation();
                    } else if (window.event) {
                        window.event.cancelBubble = true;
                    }
                }
            });

            $('.fixed-plugin .active-color span').click(function () {
                $full_page_background = $('.full-page-background');

                $(this).siblings().removeClass('active');
                $(this).addClass('active');

                var new_color = $(this).data('color');

                if ($sidebar.length != 0) {
                    $sidebar.attr('data-color', new_color);
                }

                if ($full_page.length != 0) {
                    $full_page.attr('filter-color', new_color);
                }

                if ($sidebar_responsive.length != 0) {
                    $sidebar_responsive.attr('data-color', new_color);
                }
            });

            $('.fixed-plugin .background-color .badge').click(function () {
                $(this).siblings().removeClass('active');
                $(this).addClass('active');

                var new_color = $(this).data('background-color');

                if ($sidebar.length != 0) {
                    $sidebar.attr('data-background-color', new_color);
                }
            });

            $('.fixed-plugin .img-holder').click(function () {
                $full_page_background = $('.full-page-background');

                $(this).parent('li').siblings().removeClass('active');
                $(this).parent('li').addClass('active');


                var new_image = $(this).find("img").attr('src');

                if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
                    $sidebar_img_container.fadeOut('fast', function () {
                        $sidebar_img_container.css('background-image', 'url("' + new_image + '")');
                        $sidebar_img_container.fadeIn('fast');
                    });
                }

                if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
                    var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');

                    $full_page_background.fadeOut('fast', function () {
                        $full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
                        $full_page_background.fadeIn('fast');
                    });
                }

                if ($('.switch-sidebar-image input:checked').length == 0) {
                    var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
                    var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');

                    $sidebar_img_container.css('background-image', 'url("' + new_image + '")');
                    $full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
                }

                if ($sidebar_responsive.length != 0) {
                    $sidebar_responsive.css('background-image', 'url("' + new_image + '")');
                }
            });

            $('.switch-sidebar-image input').change(function () {
                $full_page_background = $('.full-page-background');

                $input = $(this);

                if ($input.is(':checked')) {
                    if ($sidebar_img_container.length != 0) {
                        $sidebar_img_container.fadeIn('fast');
                        $sidebar.attr('data-image', '#');
                    }

                    if ($full_page_background.length != 0) {
                        $full_page_background.fadeIn('fast');
                        $full_page.attr('data-image', '#');
                    }

                    background_image = true;
                } else {
                    if ($sidebar_img_container.length != 0) {
                        $sidebar.removeAttr('data-image');
                        $sidebar_img_container.fadeOut('fast');
                    }

                    if ($full_page_background.length != 0) {
                        $full_page.removeAttr('data-image', '#');
                        $full_page_background.fadeOut('fast');
                    }

                    background_image = false;
                }
            });

            $('.switch-sidebar-mini input').change(function () {
                $body = $('body');

                $input = $(this);

                if (md.misc.sidebar_mini_active == true) {
                    $('body').removeClass('sidebar-mini');
                    md.misc.sidebar_mini_active = false;

                    $('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();

                } else {

                    $('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');

                    setTimeout(function () {
                        $('body').addClass('sidebar-mini');

                        md.misc.sidebar_mini_active = true;
                    }, 300);
                }

                // we simulate the window Resize so the charts will get updated in realtime.
                var simulateWindowResize = setInterval(function () {
                    window.dispatchEvent(new Event('resize'));
                }, 180);

                // we stop the simulation of Window Resize after the animations are completed
                setTimeout(function () {
                    clearInterval(simulateWindowResize);
                }, 1000);

            });
        });
    });
</script>
<script>
    $(document).ready(function () {
        $("#sort-page-table").DataTable({
            "columnDefs": [{
                "searchable": true,
                "orderable": true,
                "targets": 0
            }],
            "order": [[1, 'asc']]
        })
    })
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var times = ['2017', '2018', '2019', '2020'];
    var barChart = echarts.init(document.getElementById('bar-chart'),'blue');
    // 成果统计图表的配置项和数据
    baroption = {
        legend: {
            bottom:'bottom'
        },

        tooltip: {},
        dataset: {
            dimensions: ['product', '期刊论文', '会议论文', '专著'],
            source: [
                <#list teamAgg as states>
                {product: ${states.years}, '期刊论文': ${states.qk}, '会议论文': ${states.hy}, '专著': ${states.zz} }
                <#if states_index != 3>
                ,
                </#if>

                </#list >

            ]
        },
        color: [
            "#3fb1e3",
            "#6be6c1",
            "#626c91",
            "#a0a7e6",
            "#c4ebad",
            "#96dee8"
        ],
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 10
                            }
                        }
                    }
                },
            },
            {type: 'bar',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 10
                            }
                        }
                    }
                },
            },
            {type: 'bar',
                itemStyle: {
                    normal: {
                        label: {
                            show: true, //开启显示
                            position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 10
                            }
                        }
                    }
                },
            }
        ]
    };

    if (baroption && typeof baroption === "object") {
        barChart.setOption(baroption);
    }

    <#--var qushiChart = echarts.init(document.getElementById('qushi-chart'));-->
    <#--qushioption = {-->

    <#--    tooltip: {-->
    <#--        trigger: 'axis',-->
    <#--        axisPointer: {-->
    <#--            type: 'line',-->
    <#--            lineStyle: {-->
    <#--                color: 'rgba(0,0,0,0.2)',-->
    <#--                width: 1,-->
    <#--                type: 'solid'-->
    <#--            }-->
    <#--        }-->
    <#--    },-->
    <#--    color: [-->
    <#--        "#3fb1e3",-->
    <#--        "#6be6c1",-->
    <#--        "#626c91",-->
    <#--        "#a0a7e6",-->
    <#--        "#c4ebad",-->
    <#--        "#96dee8"-->
    <#--    ],-->

    <#--    legend: {-->
    <#--        bottom:'bottom',-->
    <#--        data: ['论文', '专利', '基金']-->
    <#--    },-->

    <#--    singleAxis: {-->
    <#--        top: 50,-->
    <#--        bottom: 60,-->
    <#--        axisTick: {},-->
    <#--        axisLabel: {-->
    <#--            interval: 0-->
    <#--        },-->
    <#--        type: 'time',-->

    <#--        axisPointer: {-->
    <#--            animation: true,-->
    <#--            label: {-->
    <#--                show: true-->
    <#--            }-->
    <#--        },-->
    <#--        splitLine: {-->
    <#--            show: true,-->
    <#--            lineStyle: {-->
    <#--                type: 'dashed',-->
    <#--                opacity: 0.2-->
    <#--            }-->
    <#--        }-->
    <#--    },-->

    <#--    series: [-->
    <#--        {-->
    <#--            type: 'themeRiver',-->
    <#--            emphasis: {-->
    <#--                itemStyle: {-->
    <#--                    shadowBlur: 20,-->
    <#--                    shadowColor: 'rgba(0, 0, 0, 0.8)'-->
    <#--                }-->
    <#--            },-->
    <#--            links: {-->
    <#--                label: {-->
    <#--                    padding:4-->
    <#--                }-->
    <#--            },-->
    <#--            data: [-->

    <#--                <#list teamAgg as states>-->
    <#--                ['${states.years}', ${states.lw - 100},'论文']-->
    <#--                <#if states_index != 3>-->
    <#--                ,-->
    <#--                </#if>-->

    <#--                </#list >-->
    <#--                ,-->

    <#--                <#list teamAgg as states>-->
    <#--                ['${states.years}', ${states.zl},'专利']-->
    <#--                <#if states_index != 3>-->
    <#--                ,-->
    <#--                </#if>-->

    <#--                </#list >-->
    <#--                ,-->

    <#--                <#list teamAgg as states>-->
    <#--                ['${states.years}', ${states.jj + 15},'基金']-->
    <#--                <#if states_index != 3>-->
    <#--                ,-->
    <#--                </#if>-->

    <#--                </#list >-->




    <#--            ]-->
    <#--        }-->
    <#--    ]-->
    <#--};-->

    <#--if (qushioption && typeof qushioption === "object") {-->
    <#--    qushiChart.setOption(qushioption);-->
    <#--}-->

    var dom = document.getElementById("container");
    var graph =
        ${graph}
    ;

    // 基于准备好的dom，初始化echarts实例
    var relationChart = echarts.init(dom);
    relationChart.hideLoading();
    var categories = [];
    var catName = ["负责人","团队人员","机构","领域"]
    for (var i = 0; i < 4; i++) {
        categories[i] = {
            name: catName[i]
        };
    }
    graph.nodes.forEach(function (node) {
        node.itemStyle = null;//
        node.symbolSize = node.size;//强制指定节点的大小
        // Use random x, y
        node.x = node.y = null;
        node.draggable = true;

    });
    option = {
        /*title: {
            text: '',//文本标题
            subtext: 'Default layout',//副标题
            top: 'bottom',//上下位置
            left: 'right'//左右位置
        },*/
        tooltip: {
            formatter: function (params, ticket, callback) {//回调函数
                var str = appendPath(graph.nodes[params.dataIndex].id);
                document.getElementById("div1").innerHTML = str;
                return str;//
            }
        },
        legend: [{
            // selectedMode: 'single',
            data: categories.map(function (a) {//显示策略
                return a.name;
            })
        }],
        animation: false,//是否开启动画
        series : [
            {
                name: '',
                type: 'graph',
                layout: 'force',
                data: graph.nodes,//节点数据
                links: graph.links,//节点边数据
                categories: categories,//策略
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [0, 0],
                roam: false,//是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
                label: {
                    normal: {
                        show:'false',
                        position: 'right'
                    }
                },
                slient:false,//是否响应点击事件，为false的时候就是响应
                force: {
                    repulsion: 400
                }
            }
        ]
    };
    relationChart.setOption(option);

    <#--var sbChart = echarts.init(document.getElementById('container'));-->
    <#--sbChart.showLoading();-->
    <#--$.get('/team/api/relation?team_id=${team.getId()}', function (data) {-->
    <#--    sbChart.hideLoading();-->

    <#--    echarts.util.each(data.children, function (datum, index) {-->
    <#--        index % 2 === 0 && (datum.collapsed = true);-->
    <#--    });-->

    <#--    sbChart.setOption(option = {-->
    <#--        tooltip: {-->
    <#--            trigger: 'item',-->
    <#--            triggerOn: 'mousemove'-->
    <#--        },-->
    <#--        series: [-->
    <#--            {-->
    <#--                type: 'tree',-->

    <#--                data: [data],-->

    <#--                top: '1%',-->
    <#--                left: '7%',-->
    <#--                bottom: '1%',-->
    <#--                right: '20%',-->

    <#--                symbolSize: 15,-->

    <#--                label: {-->
    <#--                    position: 'right',-->
    <#--                    verticalAlign: 'middle',-->
    <#--                    align: 'left',-->
    <#--                    fontSize: 15-->
    <#--                },-->

    <#--                leaves: {-->
    <#--                    label: {-->
    <#--                        position: 'right',-->
    <#--                        verticalAlign: 'middle',-->
    <#--                        align: 'left'-->
    <#--                    }-->
    <#--                },-->

    <#--                expandAndCollapse: true,-->
    <#--                animationDuration: 550,-->
    <#--                animationDurationUpdate: 750-->
    <#--            }-->
    <#--        ]-->
    <#--    });-->
    <#--});-->
</script>
</body>
</html>